    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--weui.min.css-->
    <link rel="stylesheet" href="/static/index/css/page/base.css"/>
    <link rel="stylesheet" href="/static/index/css/page/font.css"/>
    <link rel="stylesheet" href="/static/index/jquery_weui/css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/index/jquery_weui/lib/weui.min.css">
    <!--jquery-weui.min.css-->
    <link rel="stylesheet" type="text/css" href="/static/index/jquery_weui/css/jquery-weui.min.css">
    <link rel="stylesheet" href="/static/index/css/page/personal.css" />
</head>
<style>
    .renz-pic
    {

    }


    /*上传input*/
    .myUpload
    {
        position: absolute;
        opacity: 0;
        z-index: 100;
        width: 30%;
        height: 13%;
        display: block;
    }
    /*关闭按钮*/
    .close
    {
        position: absolute;
        right: 0;
        top: 0;
        width: 20px;
        height: 20px;
        z-index: 200;
        cursor: pointer;
    }
    /*隐藏*/
    .hideimg
    {
        display: none;
    }
    /*上传的图片*/
    .addimg
    {
        width: 100%;
        height: 100%;
    }
    /*显示上传的图片*/
    .showimg
    {
        width: 100%;
        height: 100%;
    }
    #dtxz{
        width: 6rem;
        height: 4rem;
        float: left;
        margin: 4% auto;
    }
    .submit{
        float: left;
    }
    .shili{
	  position: absolute;
	  left: 4%;
	  top: 68%;
    }
    .rz_submit{
    	height:1.7rem;
    	background:none;
    	border:0;
    	font-size: 14px;
    	color: #FFFFFF;
    }
    /*图片处理css*/
    	.personal-list .swiper-slide>a{
    		overflow: hidden;
    		position: relative;
    	}
    	.personal-list .swiper-slide>a img{
    		
    		position: absolute;
    		left: 50%;
    		top: 50%;
    	}



    .caller .weui-cell__bd{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        height: 1.5rem;
        overflow: hidden;
    }
    .caller .weui-cell__hd img{
        width: 1rem;
        height: auto;
        margin-right: .48rem;
        vertical-align: middle;
        display: inline-block;
    }
    .caller .weui-cell__hd span{
        display: inline-block;
        vertical-align: middle;
        margin-right: .48rem;
        width: 3rem;
        font-size: .75rem;
    }
    .caller-img{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }
    .caller-img img{
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        vertical-align: middle;
        margin-left: 5px;
    }
    .centerPopup .weui-popup__modal{
        width: 90%;
        height:auto;
        bottom: auto;
        top: 22%;
        background: #fff;
        border-radius: 7px;
        left: 5%;
    }
    .centerPopup .weui-popup__modal .title{
        text-align: center;
    }
    .weui-popup__overlay{
        background: #7e7e7e;
        opacity: .5;
    }
    /* .modal-content{
         padding-bottom: .5rem;
         min-height: 6rem;
     }*/
    .modal-content img{
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        vertical-align: middle;
        margin-left: .3rem;
        margin-top: .3rem;
    }

    .centerPopup .weui-popup__modal{
        width: 90%;
        height:auto;
        bottom: auto;
        top: 22%;
        background: #fff;
        border-radius: 7px;
        left: 5%;
    }
    .centerPopup .weui-popup__modal .title{
        text-align: center;
    }
    .weui-popup__overlay{
        background: #7e7e7e;
        opacity: .5;
    }
    .modal-content{
        padding-bottom: .5rem;
        min-height: 6rem;
    }
    .modal-content img{
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        vertical-align: middle;
        margin-left: .3rem;
        margin-top: .3rem;
    }
</style>

<body>
<div class="pageControl personal bg-f5">
    <!--主体-->
    
    <div class="main">
        <div class="bg-di"></div>
        <div class="msui_nav msui_navTop">
            <a class="msui_navTop-back" href="javascript:history.back();"><i class="micon-back"></i></a>
            <h1 class="msui_navTop-title">个人信息</h1>
            <a class="msui_navTop-icon" href="">
                <i class="micon-message"></i>
            </a>
        </div>
        <div class="top">
            <a class="zhe"></a>
            <!--背景图片-->
            {if $user_info.user_back}
            <img src="{$user_info.user_back}" alt=""/>
            {else}
            <img src="/static/index/img/idx.png" alt=""/>
            {/if}
            <p class="bg-ff7 offered-count">已策划<span>{$active_count}</span>次活动/获得<span>{if $zan_count}{$zan_count}{else}0{/if}个赞</span></p>
            <div class="index-top-tab">
                <div id="personal-bg"></div>
                <div class="personal_img">
                	{if $info.img}
                    <a href=""><img class="personal_img1" src="{$info.img}" alt=""/></a>
                    {else}
                    <a href=""><img class="personal_img1" src="/static/index/img/head.png" alt=""/></a>
                    {/if}
                    <a id="personal-tou" href=""></a>
                </div>
                <div class="renZh">
                    <div class="bg-tra"></div>
                    {if $info.is_rz eq 1}<img src="/static/index/images/x0.png" alt=""/>{/if}
                    <span>{if $info.is_rz eq 0}未认证{elseif $info.is_rz eq 2}待审核{else}已认证{/if}</span>
                </div>
                <div class="index-tab">
                    <a href="1" class="active">个人资料</a>
                    <a href="2">我的照片</a>
                    <a href="3">我的发布</a>
                </div>
            </div>
        </div>
        <div class="pl personal-three_top">
            <div>
                <img class="personal-three_img" src="/static/index/images/x9.png" alt="">
            </div>
            <div class="personal-three">
                <a href="javascript:;">
                    <img src="/static/index/images/x5.png" alt="">
                    <p>魅力值<span>({$info.charm})</span></p>
                </a>
                <a href="javascript:;">
                    <img src="/static/index/images/x6.png" alt="">
                    <p>财富值<span>({$info.asset})</span></p>
                </a>
                <a href="javascript:;">
                    <img src="/static/index/images/x7.png" alt="">
                    <p>信誉值<span>({$info.Credit})</span></p>
                </a>
            </div>
        </div>
        <div class="personal-list">
            <!--切换class为active1换目录-->
            <div class="personal-list1 active1" data-value="1">
                <div class="weui-cells">

                    <a href="javascript:;" data-target="#caller" class="open-popup weui-cell weui-cell_access caller">
                        <!--<div class="weui-popup__overlay"></div>-->
                        <!--<div class="weui-popup__modal">-->
                        <!--<div class="toolbar">-->
                        <div class="weui-cell__hd">
                            <img src="/static/index/img/eye1.png" alt="">
                            <span class="cl-3333 fs065">最近访客</span>
                        </div>
                        <div class="weui-cell__bd caller-img">
                            {foreach name="visit" item="vo"}
                            <img class="list"   src="{$vo.img}" alt="">
                            {/foreach}
                        </div>
                        <div class="weui-cell__ft">

                        </div>
                        <!--</div>-->
                    </a>

                    <div class="weui-cell weui-cell_access">
                        <div class="weui-label">
                            <img src="/static/index/img/p2.png" alt=""/>
                            <span>昵称</span>
                        </div>
                        <div class="weui-cell__bd">
                            <input type="text" readonly="true" class="weui-input qianmin"  value="{$info.name}"/>
                        </div>
                        <!--<div class="weui-cell__ft">

                        </div>-->
                    </div>
                    <div class="weui-cell weui-cell_access">
                        <div class="weui-label">
                            <img src="/static/index/img/p3.png" alt=""/>
                            <span>性别</span>
                        </div>
                        <div class="weui-cell__bd">
                            <input id="sex" readonly="true" type="text" class="weui-input qianmin" value="{if $user_id}{if $info.sex eq 0}女{else}男{/if}{/if}"/>
                        </div>
                        <!--<div class="weui-cell__ft">

                        </div>-->
                    </div>
                    <div class="weui-cell weui-cell_access">
                        <div class="weui-label">
                            <img src="/static/index/img/p4.png" alt=""/>
                            <span>年龄</span>
                        </div>
                        <div class="weui-cell__bd">
                            <input type="text"  readonly="true" id="age" class="weui-input qianmin" value="{$info.age}"/>
                        </div>
                        <!--<div class="weui-cell__ft">

                        </div>-->
                    </div>
                </div>
                <div class="weui-cells bang">
                    <a class="weui-cell weui-cell_access">
                        <div class="weui-cell__bd">
                            <img src="/static/index/img/p5.png" alt=""/>
                            <span>手机号绑定</span>
                        </div>
                        <!--<div class="weui-cell__ft">-->
                            <p class="cl-3333">{if $is_tel neq ''}已绑定{else}未绑定{/if}</p>
                        <!--</div>-->
                    </a>
                    <a id="personal-email" class="weui-cell weui-cell_access">
                        <div class="weui-cell__bd">
                            <img src="/static/index/img/p6.png" alt=""/>
                            <span>邮箱绑定</span>
                        </div>
                        <!--<div class="weui-cell__ft">-->
                            <p class="cl-3333">{if $is_email neq ''}已绑定{else}未绑定{/if}</p>
                        <!--</div>-->
                    </a>
                    <a class="weui-cell weui-cell_access" id="shiren">
                        <div class="weui-cell__bd">
                            <img src="/static/index/img/p7.png" alt=""/>
                            <span>用户实名认证</span>
                        </div>
                        <!--<div class="weui-cell__ft">-->
                            <p class="cl-3333">{if $is_real_name neq ''}已实名{else}未实名{/if}</p>
                        <!--</div>-->
                    </a>
                    <div class="weui-cell weui-cell_access">
                        <div class="weui-label">
                            <img src="/static/index/img/p2.png" alt=""/>
                            <span>签名</span>
                        </div>
                        <div class="weui-cell__bd">
                            <input type="text" readonly="true" id="qianmin" class="weui-input qianmin" value="{$info.sign}"/>
                            <input type="hidden" id="uid" class="weui-input" value="{$info.id}"/>
                        </div>
                       <!-- <div class="weui-cell__ft">

                        </div>-->
                    </div>
                </div>
            </div>
            <div class="personal-list2" data-value="2">
                <!--有内容给class为full加active2，没有内容给null 加class active2-->
                <div class="full active2 pic1">
                	<!--我的照片-->
                    {foreach name="my_photo_info" item="vo" key="k"}
                    <div class="pic-list t0">
                        <p class="text-center">{$vo.create_time}</p>
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                {foreach name="vo['photo']" item="vv"}
                                <div class="swiper-slide">
                                    <a href="javascript:;"><img src="{$vv}" alt=""/></a>
                                </div>
                                {/foreach}
                            </div>
                            <div class="pic-count"><?php echo count($vo["photo"]);?>张</div>
                        </div>
                    </div>
                    {/foreach}
                </div>
                <div class="null">
                    <p class="cl-3333 text-center null1">主人还没有发布照片哟~</p>
                </div>
            </div>
            <div class="personal-list3" data-value="3">
                <div class="full active3">
                	<!--我的发布-->
                    <!--class为t0，每加一组数据递增-->
                    {foreach name="fabu_info" item="vo"}
                    <div class="list2 t0">
                        <p class="list2-a">{$vo.content}</p>
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                            	<?php $ssh = explode("|",$vo['photo']);?>
                            	{foreach name="ssh" item="photo"}
                                <div class="swiper-slide">
                                    <a href="/index/index/detail?id={$vo.id}&uid={$user_id}"><img src="{$photo}" alt=""/></a>
                                </div>
                                {/foreach}
                            </div>
                            <div class="pic-count"><?php echo count($ssh);?>张</div>
                        </div>
                        <div class="weui-cell1">
                            <div class="weui-cell__bd">
                                <img src="/static/index/img/x1.png" alt=""/>
                                <span class="cl-9999">我在{$vo.address}</span>
                            </div>
                            <div class="weui-cell__ft">
                                <img src="/static/index/img/x2.png" alt=""/>
                                <span>{$vo.count}</span>
                            </div>
                            <div class="weui-cell__ft">
                                <img src="/static/index/img/x3.png" alt=""/>
                                <span>{$vo.comment_count}</span>
                            </div>
                        </div>
                    </div>
                    {/foreach}
            </div>
            <div class="null">
                    <p class="cl-3333 text-center null1">主人还没有发布活动哟~</p>
                </div>
          </div>
    </div>
</div>
    <!--最近访客-->
    <div id="caller" class="centerPopup weui-popup__container">
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div class="toolbar">
                <div class="toolbar-inner">
                    <h1 class="title">最近访客</h1>
                </div>
            </div>
            <div class="modal-content">
                {foreach name='visit' item='vo'}
                <a href="/index/personal/personal_detail?id={$vo.user_id}"><img class="list" src="{$vo.img}" alt=""></a>
                {/foreach}
            </div>
        </div>
    </div>
<!-- jquery-2.1.4 -->
<script type="text/javascript" src="/static/index/jquery_weui/lib/jquery-2.1.4.js"></script>
<!-- jquery-weui.min.js -->
<script type="text/javascript" src="/static/index/jquery_weui/js/jquery-weui.min.js"></script>
<script src="/static/index/jquery_weui/js/swiper.min.js"></script>
<script>
	
	/*绑定手机号码（发送验证码插件）*/
	function verifyCode(target,time,mtarget,message) {
        if (time == 0) {
            target.removeAttr('disabled');
            target.html('获取验证码');
            if (mtarget) {
                mtarget.closest('p').css('display', 'none');
                mtarget.html(message);
            }
        }
        else {
            target.attr('disabled', 'disabled');
            target.html(time + 's后可以重新获取');
            if (mtarget) {
                mtarget.closest('p').css('display', 'block');
                mtarget.html(message);
            }
            time--;
            setTimeout(function () {
                verifyCode(target, time);
            }, 1000)
        }
    }
    $('.js-verify').on('click',function(e){
    	/*验证手机号码*/
		var re;
	    var tel=$("#tel").val();
	    re= /^0?(13|14|15|17|18)[0-9]{9}$/
	    if(re.test(tel))
	    {
	    	$.post(
				"/index/binding/phone",
				{tel: tel},
			    function(data){
			    	if(data == -1){
			    		alert("该手机号码已被绑定！");
			    	}
		   		}
			);
	    	e.preventDefault();
       		verifyCode($(this),60);
	    }else{
	    	alert('请输入正确的手机号码！');
	    }
    });
    
    /*确认绑定*/
	$("#binding").click(function(){
		tel = $("#tel").val();
		code = $("#code").val();
		user_id = {$user_id};
		$.post(
			"/index/personal/binding",
			{ tel:tel,code:code,user_id:user_id},
		    function(data){
		    	if(data == 1){
		    		alert('绑定成功');window.location.href="/index/personal/personal?id="+user_id
		    	}
		    	if(data == -1){
		    		alert('该手机号码已被绑定！');
		    	}
		    	if(data == -3){
		    		alert('验证码错误！');
		    	}
		    	
		    }
		)
	});
	
	
   /* $(".qianmin").change(function(){
        qian = $("#qianmin").val();
        age = $("#age").val();
        uname = $("#uname").val()
        sex = $("#sex").val();
        if(sex == '男'){
            sex = 1;
        }else{
            sex = 0;
        }
        uid = {$user_id};
        $.ajax({
            url:"/index/personal/updatesign",
            data:{id:uid,sign:qian,age:age,uname:uname,sex:sex},
            type:"post",
            success:function(data){
            }
        });
    });*/
    $(".goBack").click(function (e) {
        e.preventDefault();
        $(this).parent().parent().hide(400)
    })
   /* $("#sex").select({
        title: "选择性别",
        items: ["男", "女"]
    });*/
    $("#personal-bg").click(function (e) {
        e.preventDefault();
        $(".personal-bg").show();
    })
    $("#personal-tou").click(function (e) {
        e.preventDefault();
        $(".personal-tou").show();
    })
    $("#personal-email").click(function (e) {
        e.preventDefault();
        $(".personal-email").show();
    })
    $("#personal-phone").click(function (e) {
        e.preventDefault();
        $(".personal-phone").show();
    })
    $(".tan-qu").click(function (e) {
        e.preventDefault();
        $(this).parent().parent().parent().parent().hide(400)
    })
    $(".shiren-go").click(function (e) {
        e.preventDefault();
        $(".shiren").hide(400);
        $("#renzheng").show();
        $(".personal-list>div").removeClass("active1")
        $(".shiren").removeClass("active3")
        $(".index-tab>a").removeClass("active")
    })
    $("#renzheng-qu").click(function (e) {
        e.preventDefault();
        $("#renzheng").hide(400);
        $(".personal-list>div:first-child").addClass("active1")
        $(".index-tab>a:first-child").addClass("active")
    })
    $("#shiren").click(function (e) {
        e.preventDefault();
        $(".shiren").show();
    })
    $(".shiren-qu").click(function (e) {
        e.preventDefault();
        $(".shiren").hide(400);
    })
    $(function(){
        var perWidth = $(".personal_img1").css("width");
        $(".personal_img1").css("height",perWidth);
        personal();
    })
    var topHeight=$('.index-top').height();
    
    $('.personal-list').css({
    	position:'absolute',
    	top:topHeight,
    	left:'0',
    	right:'0',
    	width:'100%'
    })
    $('.personal-list>div').css({
    	position:'fixed',
    	top:'0',
    	left:'100%',
    	right:'-100%'
    })
    $('.personal-list>div.active1').css({
    	position:'absolute',
    	top:'0',
    	left:'0',
    	right:'0'
    })
    $(function(){
    	var swiper = new Swiper('.swiper-container', {
            slidesPerView: 3,
            spaceBetween: 5
        });
    })
    $(".index-tab").on('click','a',function(e){
        e.preventDefault();
        $("#renzheng").hide(400);
        var count=$(this).attr('href');
        $(this).addClass('active')
                .siblings().removeClass('active');
        var activeHeight1=$('.activ1').height();
        $(`[data-value='${count}']`).css({
    	position:'absolute',
    	top:'0',
    	left:'0',
    	right:'0'
    }).siblings().css({
    	position:'fixed',
    	top:'0',
    	left:'100%',
    	right:'-100%'
    })
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 3,
            spaceBetween: 5
        });
    })
    /*for(var j=1;j<5;j++){
        var listLength=$(`[data-value='${j}']>div`).length;

        for(var t=0;t<listLength;t++){
            var slider_length=$(`[data-value='${j}'] .t${t} .swiper-wrapper`).children().length;
            $(`[data-value='${j}'] .t${t} .pic-count`).html(slider_length+"张")
        }
    }*/
    function personal(){
        for(var i=2;i<5;i++){
            var personalList=$(`.personal-list${i} .full`).children().length;
            if(personalList!==0){
                console.log(2);
                $(`.personal-list${i} .full`).addClass('active2')
                $(`.personal-list${i} .null`).removeClass('active2')
            }else{
                $(`.personal-list${i} .full`).removeClass('active2')
                $(`.personal-list${i} .null`).addClass('active2')
            }
        }
    }

    //上传图片
    $(function(){
        //点击上传时实时显示图片
        $(".sctp").on("change",".myUpload",function(){
            var src=getObjectURL(this.files[0]);//获取上传文件的路径
            $(this).siblings(".close").removeClass('hideimg');
            $(this).siblings(".addimg").addClass('hideimg');
            $(this).siblings(".showimg").removeClass('hideimg');
            $(this).siblings(".showimg").attr('src',src);//把路径赋值给img标签
            $(this).siblings(".addimg").remove();
        });

        //点击关闭按钮时恢复初始状态
        $(".close").on("click",function(){
            var file=$(this).parent().find(".myUpload");
            file.after(file.clone().val(""));
            file.remove();
            $(this).addClass('hideimg');
            $(this).siblings(".addimg").removeClass('hideimg');
            $(this).siblings(".showimg").addClass('hideimg');
            $(this).siblings(".showimg").removeAttr('src');//把img标签路径移除
        });
    });

    //获取上传文件的url
    function getObjectURL(file)
    {
        var url = null;
        if (window.createObjectURL != undefined)
        {
            url = window.createObjectURL(file);
        }
        else if (window.URL != undefined)
        {
            url = window.URL.createObjectURL(file);
        }
        else if (window.webkitURL != undefined)
        {
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
$(function(){
		$('.personal-list .swiper-slide').each(function(){
			var swiperWidth=$(this).css('width');
			console.log(swiperWidth)
			$(this).css('height',swiperWidth)
		})
		
		
	
		//		图片处理
		$('.personal-list .swiper-slide>a img').each(function(){
			
			var imgWidth=-parseFloat($(this).css('width'))/2;
			var imgHeight=-parseFloat($(this).css('height'))/2;
			/*console.log(imgWidth)
			console.log(imgHeight)*/
			
			var imgWidth1=parseFloat($(this).css('width'));
			var imgHeight1=parseFloat($(this).css('height'));
			if(imgWidth1>=imgHeight1){
				$(this).css({
					height:'100%',
					width:'auto'
				})
			$(this).css('top','0')
			$(this).css('margin-left',imgWidth)
			}else if(imgWidth1<imgHeight1){
				$(this).css({
					height:'auto',
					width:'100%'
				})
				$(this).css('margin-top',imgHeight)
				$(this).css('margin-left',imgWidth)
			}
		})
	})




    
    window.POP = {}

    ;(function(P){
        P.eventMap = {
            listen : {},
            on : function(type, fn){
                if(typeof type === 'string'){
                    if(!this.listen.hasOwnProperty(type)){
                        this.listen[type] = [];
                    }
                    if(typeof fn === 'function'){
                        return this.listen[type].push(fn);
                    }
                }
            },
            fire : function(type){
                if(typeof type === 'string'){
                    var _listenType = this.listen[type];
                    if(_listenType instanceof Array){
                        for (var i = 0; i < _listenType.length; i++) {
                            _listenType[i].apply(this,[].slice.call(arguments,1));
                        }
                    }
                }
            },
            remove : function(type){
                if(type instanceof Array){
                    var _type;
                    for (var i = 0; i < type.length; i++) {
                        if(type[i] && this.listen.hasOwnProperty(type[i])){
                            delete this.listen[type[i]];
                        }
                    }
                }else{
                    if(type && this.listen.hasOwnProperty(type)){
                        delete this.listen[type];
                    }
                }
            }
        }
    })(POP);

    ;(function(P, win, doc){
        var _layer = 2000;

        P.pic = function(obj,option){
            return new _t(obj,option);
        }

        var _t = function(){
            this.init.apply(this, arguments)
        }

        _t.prototype = {
            init : function(obj, option){
                this.$el = typeof obj === 'string' ? doc.querySelector(obj) : obj;
                var _imgSrc = '';
                var opt = {
                    dataSrc : 'data-src',
                    _imgSrc : _imgSrc,
                    item : 'li'
                }
                if(option && option instanceof Object){
                    for(var k in option){
                        opt[k] = option[k];
                    }
                }
                console.log(opt)
                this.opt = opt;
                this._index = this.opt.index;

                //创建弹出内容
                var _item = this.$el.querySelectorAll(this.opt.item);
                var _self = this;
                [].forEach.call(_item,function(item,i){
                    item.addEventListener('click',function(e){
                        e.preventDefault();
                        this._index = i;
                        this.createContent();
                        this.initPage(i);
                        this.init = null;
                    }.bind(_self),false);
                });

            },
            bindUI : function(){
                var _list = this._list;
                var _item = _list.querySelectorAll('span');
                var _self = this;
                this.isRun = false;

                _list.addEventListener('touchstart',this,false);
                _list.addEventListener('touchmove',this,false);
                _list.addEventListener('touchend',this,false);
                window.addEventListener('resize',this,false);

                this._wrap.addEventListener('click',function(e){
                    e.preventDefault();
                    POP.eventMap.fire('wrapClick');
                },true);
            },
            destroy : function(){

                var _list = this._list;
                this._wrap.classList.remove('isShow');
                this._wrap.addEventListener("webkitTransitionEnd",remove,false);
                this._wrap.addEventListener("transitionend",remove,false);

                function remove(){
                    this.parentNode && this.parentNode.removeChild(this);
                }

                POP.eventMap.remove('wrapClick');
                _list.removeEventListener('touchstart',this,false);
                _list.removeEventListener('touchmove',this,false);
                _list.removeEventListener('touchend',this,false);
            },
            handleEvent : function(e){
                var _type = e.type;
                switch (_type) {
                    case 'touchstart':
                        this.touchstart(e)
                        break;
                    case 'touchmove':
                        this.touchmove(e)
                        break;
                    case 'touchend':
                        this.touchend(e)
                        break;
                    case 'resize':
                        this.resize()
                        break;
                }
            },
            start : function(e){
                return {
                    _x : e.targetTouches[0].pageX,
                    _y : e.targetTouches[0].pageY
                }
            },
            touchstart : function(e){
                this.posX = this.start(e)._x;
                this.tranX = parseInt(this.getTransform(this._list)) || 0;
                this.offX = 0;
                this.startTime = new Date() * 1;
                this.isRun = true;
            },
            touchmove : function(e){
                if(this.isRun){
                    this.offX = this.start(e)._x - this.posX;
                    var _px = this.tranX + this.offX;
                    var _index = this._index;
                    if(_px > 8 || _px < -8){
                        e.preventDefault()
                    }
                    if(_index == 0 && this.offX > 0 || _index == this.len-1 && this.offX < 0){
                        _px = this.tranX + this.offX * 0.3
                    }

                    this.setTransform(_px,0);
                    this._px =  _px;
                }
            },
            touchend : function(e){
                if((Math.abs(this.offX) || 0) == 0) return;
                if(this.isRun){
                    var _endTime = new Date() * 1;
                    var _pw = this.getWin.w() / 6;
                    var _index = this._index;
                    var _len = this.len;
                    if(_endTime - this.startTime > 50 && Math.abs(this.offX) > _pw){
                        _index = this.offX > _pw ? (_index == 0 ? 0 : --_index) : (_index >= _len-1 ? _len -1 : ++_index);
                        this._index = _index;
                        this.goTransform(_index);
                    }else{
                        this.goTransform(_index);
                    }
                }
                this.isRun = false;
            },
            resize : function(){
                this.getWin.w();
                this.getWin.h();
                this.initPage(this._index);
                this.initStyle();
            },
            goTransform : function(n){
                var _w = -n * this.getWin.w();
                this.loadImg(n);
                this.pageCur.innerText = n+1;
                this.setTransform(_w);
            },
            loadImg : function(n){
                var _o = this._list.querySelectorAll('span')[n];
                var _img = _o.querySelector('img');
                var _dataSrc = 'data-src'
                if(_img.getAttribute(_dataSrc)){
                    _img.setAttribute('src',_img.getAttribute(_dataSrc));
                    _img.removeAttribute(_dataSrc);
                    _o.style.background = 'none';
                }
            },
            initPage : function(n){
                this.loadImg(n);
                this._list.style.webkitTransition = 'none';
                this._list.style.webkitTransform = 'translate3d('+-(n * this.getWin.w())+'px,0,0)';
            },
            setTransform : function(_x,ts){
                this._list.style.webkitTransition = ts == 0 ? 'none' : 'all .5s';
                this._list.style.webkitTransform = 'translate3d('+(_x ? _x : 0)+'px,0,0)';
            },
            getTransform : function(o){
                return win.getComputedStyle(o)['webkitTransform'].split(',')[4];
            },
            createContent : function(){
                _layer++;
                var _header = '<div class="pic_head">(<span class="pageCur">'+(this._index+1)+'</span>/<span class="pageSize">'+this.$el.querySelectorAll(this.opt.item).length+'</span>)</div>';
                var _content = '<div class="picContent">\
								<div class="picList"></div>\
							</div>';
                this.getElement('body').insertAdjacentHTML('beforeEnd','<div id="pic_wrap'+_layer+'" class="pic_wrap">'+_header + _content+'</div>');

                var _topHead = doc.querySelector('head');
                if(!_topHead.querySelector('#picStyle')){
                    var style ='<style id="picStyle">\
								.pic_wrap {position:fixed; left:0; top:0; width:100%; height:100%; z-index: 1000; opacity: 0; -webkit-transition:all .5s; transition:all .5s; }\
								.pic_head { width:100%; height:25px; line-height:25px; background:#000; text-align: center; color:#fff;}\
								.isShow { opacity: 1;}\
								.picContent {position:relative; width:100%; height:100%; background:#000; overflow: hidden;}\
								.picList {position: absolute; left:0; top:0; width:100%; height:100%;}\
								.picList .picItems {display: table-cell; vertical-align: middle; text-align: center; background:url('+this.opt._imgSrc+') no-repeat center center; background-size:16px 16px;}\
								.picList .picItems img {max-width: 100%; max-height: 100%; vertical-align: middle; }\
							</style>';
                    _topHead.insertAdjacentHTML('beforeEnd',style);
                }

                var _wrap = this.getElement('#pic_wrap'+_layer);
                this._head = _wrap.querySelector('.pic_head');
                this._list = _wrap.querySelector('.picList');
                this.pageCur = _wrap.querySelector('.pageCur');
                this._wrap = _wrap;
                this._wrap.classList.add('isShow');
                this.initPic();
                this.bindUI();

                POP.eventMap.on('wrapClick',function(){
                    this.destroy();
                }.bind(this));
            },
            initPic : function(){
                var _item = this.$el.querySelectorAll(this.opt.item);
                var _len = _item.length;
                if(_len){

                    var imgArr = [],_self = this;
                    [].forEach.call(_item,function(item,i){
                        if(item.getAttribute(_self.opt.dataSrc)){
                            imgArr.push({
                                loadShow : 0,
                                src : item.getAttribute(_self.opt.dataSrc)
                            });
                        }else if(item.querySelector('img')){
                            var _img = item.querySelector('img');
                            if(_img.getAttribute(_self.opt.dataSrc)){
                                imgArr.push({
                                    loadShow : 0,
                                    src : _img.getAttribute(_self.opt.dataSrc)
                                });
                            }else{
                                imgArr.push({
                                    loadShow : 1,
                                    src : _img.getAttribute('src')
                                });
                            }
                        }
                    });

                    var _html = '';
                    for (var i = 0; i < imgArr.length; i++) {
                        _html += '<span class="picItems"><img '+(imgArr[i].loadShow ? "src" : "data-src")+'="'+imgArr[i].src+'"></span>';
                    }

                    this.len = _len;
                    this._list.innerHTML = _html;

                    this.initStyle();

                }
            },
            //初始化dom
            initStyle : function(){
                var _item = this._list.querySelectorAll('.picItems');
                var win = this.getWin;
                var _w = _item.length * win.w();
                this._list.style.width = _w + 'px';
                for (var i = 0; i < _item.length; i++) {
                    _item[i].style.cssText = 'width:'+ win.w() +'px; height:'+ parseInt(win.h() - this._head.offsetHeight) +'px';
                }
            },
            getElement : function(o){
                return typeof o === 'string' ? doc.querySelector(o) : o;
            },
            getWin : {
                w : function(){
                    return win.innerWidth;
                },
                h : function() {
                    return win.innerHeight;
                }
            }
        }

    })(POP,window,document);


    POP.pic('.pic1',{item : 'a',dataSrc:'data-src'})


    $(function(){
        var callerWidth=parseFloat($('.caller-img').css('width'));
        var callerImgWidth=parseFloat($('.caller-img img').css('width'))+5;
        var callerCount=parseInt(callerWidth/callerImgWidth);
        var lenght=$('.caller-img .list').length;
        console.log(lenght)
        console.log(callerCount)
        if(lenght>callerCount){
            for (var i=callerCount+1;i<=lenght;i++){
                console.log(i)
                $('.caller-img').find(`.list:nth-child(${i})`).css('display','none')
            }
        }
    })
</script>
</body>
</html>

